<template>
  <div class="user_container">
    <div class="user_banner">
      <!-- <div
        class="user_banner_title"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
        个人中心
      </div> -->
      <div class="user_mobile_info">
        <div class="user_mobile_info_box">
          <img v-if="image" :src="image" alt="" />
          <img v-else src="@/assets/user-avatar-mobile.png" alt="" />
          <div class="user_mobile_info_text">
            <div class="user_mobile_info_text_name">
              {{ formData.userName }}
            </div>
            <div class="user_mobile_info_text_phone">
              {{ formData.phone }}
            </div>
          </div>
        </div>
        <div class="user_mobile_info_edit">
          <t-upload
            v-model="files"
            class="user_list_content_box_left_upload"
            accept="image/png,image/jpeg"
            tips=""
            theme="custom"
            :before-upload="beforeUpload"
            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
          >
            <img src="@/assets/user-edit.png" alt="" />
          </t-upload>
        </div>
      </div>
    </div>
    <div class="user_list">
      <div
        class="user_list_content"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
        <div class="user_list_content_breadcrumb">
          <t-breadcrumb>
            <t-breadcrumb-item to="/dashboard/base"> 首页 </t-breadcrumb-item>
            <t-breadcrumb-item>个人中心</t-breadcrumb-item>
          </t-breadcrumb>
        </div>
        <div class="user_list_content_title">
          <h2>个人中心</h2>
          <h4>Personal Center</h4>
          <img src="@/assets/news-fh.png" alt="" />
        </div>
        <div class="user_list_content_box">
          <div class="user_list_content_box_left">
            <img v-if="image" :src="image" alt="" />
            <img v-else src="@/assets/user-avatar.png" alt="" />
            <t-upload
              v-model="files"
              class="user_list_content_box_left_upload"
              accept="image/png,image/jpeg"
              tips=""
              theme="custom"
              :before-upload="beforeUpload"
              action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
            >
              <t-button class="user_upload_btn">修改头像</t-button>
            </t-upload>
          </div>
          <div class="user_list_content_box_right">
            <div class="user_list_content_box_right_item">
              <div class="user_list_content_box_right_item_title">
                <span>基本资料</span>
                <!-- <img
                  @click="handleEditUser"
                  src="@/assets/user-edit.png"
                  alt=""
                /> -->
                <EditIcon @click="handleEditUser" />
              </div>
              <div v-if="userFormShow" class="user_info_form">
                <dynamic-form
                  v-model="formData"
                  :form-items="formItems"
                  :form-attribute="formAttribute"
                  @get-form-ref="
                    (formDom) => {
                      formRef = formDom;
                    }
                  "
                />
                <div class="user_info_form_btn">
                  <t-button @click="determine">确定</t-button>
                  <t-button
                    class="cancel-btn"
                    variant="outline"
                    @click="handleClose"
                  >
                    取消
                  </t-button>
                </div>
              </div>
              <div v-else class="user_info_form">
                <t-descriptions
                  title=""
                  :labelStyle="{
                    width: '120px',
                    color: '#666666',
                    fontSize: '14px',
                    fontWeight: 400,
                    padding: '10px 0',
                  }"
                  :contentStyle="{
                    color: '#333333',
                    fontSize: '16px',
                    fontWeight: 400,
                    padding: '10px 0',
                  }"
                >
                  <t-descriptions-item label="真实姓名：">{{
                    formData.userName
                  }}</t-descriptions-item>
                  <t-descriptions-item label="手机号码：">{{
                    formData.phone
                  }}</t-descriptions-item>
                  <t-descriptions-item label="电子邮箱：">{{
                    formData.email
                  }}</t-descriptions-item>
                  <t-descriptions-item label="身份证号：">{{
                    formData.IDNO
                  }}</t-descriptions-item>
                </t-descriptions>
                <div class="user_info_form_mobile">
                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">真实姓名：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.userName }}
                    </div>
                  </div>
                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">手机号码：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.phone }}
                    </div>
                  </div>
                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">电子邮箱：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.email }}
                    </div>
                  </div>
                  <div class="user_info_form_mobile_item">
                    <div class="user_info_form_mobile_label">身份证号：</div>
                    <div class="user_info_form_mobile_value">
                      {{ formData.IDNO }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="user_list_content_box_right_item">
              <div class="user_list_content_box_right_item_title">
                <span>我的证书</span>
              </div>
              <div class="user_list_content_box_right_item_table">
                <t-table
                  :data="data"
                  :columns="COLUMNS"
                  :bordered="true"
                  :table-layout="'auto'"
                  :hover="true"
                  row-key="id"
                  class="user_list_content_box_right_item_table_table"
                >
                  <template #op="{ row }">
                    <div class="table_btn_link">
                      <a class="t-button-link" @click="handleClickView(row)"
                        ><i class="t-icon-eye"></i> 预览</a
                      >
                      <a
                        class="t-button-link link-download"
                        @click="handleClickDwon(row)"
                        ><i class="t-icon-download"></i> <span>下载</span></a
                      >
                    </div>
                  </template>
                </t-table>
                <div class="user_list_content_box_right_item_table_mdoel">
                  <div
                    v-for="(item, index) in data"
                    :key="index"
                    class="user_info_form_mobile_item"
                  >
                    <div class="user_info_form_mobile_item_img">
                      <img src="@/assets/zs-pdf1.png" alt="" />
                    </div>
                    <div class="user_info_form_mobile_left">
                      <div class="user_info_form_mobile_type">
                        {{ item.type }}
                      </div>
                      <div class="user_info_form_mobile_name">
                        {{ item.name }}
                      </div>
                      <div class="user_info_form_mobile_time">
                        {{ item.time }}
                      </div>
                    </div>
                    <div class="user_info_form_mobile_btn">
                      <t-button @click="handleClickDwon(item)">下载</t-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="user_menu_list">
      <div class="user_menu_list_item" @click="handleClickDetail('base')">
        <div class="user_menu_list_item_left">
          <img src="@/assets/icon_menu_list_1.png" alt="" />
          <div class="user_menu_list_item_text">基本资料</div>
        </div>
        <div class="user_menu_list_item_right"><ChevronRightIcon /></div>
      </div>
      <div
        class="user_menu_list_item"
        @click="handleClickDetail('certificate')"
      >
        <div class="user_menu_list_item_left">
          <img src="@/assets/icon_menu_list_2.png" alt="" />
          <div class="user_menu_list_item_text">我的证书</div>
        </div>
        <div class="user_menu_list_item_right">
          <t-badge :count="zsCuont" :offset="[50, 20]">
            <ChevronRightIcon />
          </t-badge>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "ListBase",
};
</script>

<script setup lang="ts">
import { ChevronRightIcon, EditIcon } from "tdesign-icons-vue-next";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

import {
  COLUMNS,
  formData,
  formAttribute,
  formRef,
  formItems,
  resetFormData,
} from "./constants";
import { DynamicForm } from "@/libs/components/dynamicForm";
import { useSettingStore } from "@/store";
import { data, fetchData } from "./request";
const files = ref([]);
const route = useRoute();
const router = useRouter();
const settingStore = useSettingStore();
const image = ref("");
const baseImage = new URL("@/assets/user-avatar.png", import.meta.url);
const userFormShow = ref(false);
const zsCuont = ref(2);
onMounted(() => {
  // 调用list接口
  // fetchData()
});
const determine = async () => {
  const result = await formRef.value?.validate();

  if (result !== true) {
    return;
  }
  // 调用保存接口
  // postData(handleClose);
  return;
};
const handleClose = () => {
  userFormShow.value = false;
  resetFormData();
  // fetchData();
};
const handleFail = ({ file }) => {
  // MessagePlugin.error(`文件 ${file.name} 上传失败`);
};
const beforeUpload = (file) => {
  if (file.size > 5 * 1024 * 1024) {
    // MessagePlugin.warning('上传的图片不能大于5M');
    return false;
  }
  return true;
};
// 编辑
const handleEditUser = () => {
  userFormShow.value = !userFormShow.value;
};
// 预览
const handleClickView = (row) => {
  console.log(row);
};
// 下载
const handleClickDwon = (row) => {
  console.log(row);
};
const handleClickDetail = (type) => {
  router.push({
    path: "/userMobile",
    query: { type: type },
  });
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
